<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.pollix.at/thymeleaf/shiro">
<head th:replace="admin/common/html/tableHead :: head(~{::title},~{::link},~{::style})">

    <title>微信平台用户注册</title>
    <!-- 这儿引用单独的css link -->
    <!-- Ladda for Bootstrap 3按钮加载进度插件 -->
    <link rel="stylesheet" th:href="@{/static/admin/assets/js/button/ladda/ladda.min.css}">
    <!-- bootstrap-table表单样式 -->
    <link th:href="@{/static/admin/assets/js/bootstrap/css/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet"/>
    <!-- 用户界面自定义css -->
    <link th:href="@{/static/admin/user/css/user-add.css}" rel="stylesheet"/>

    <style type="text/css"></style>
</head>

<style>
    .tips{text-align: center}
</style>
<body>
<input type="hidden" class="form-control" id="openid" th:value="${{openid}}">
<div class="content-wrap">
    <div class="row">
        <div class="col-sm-12">
            <div class="form-group">
                <label for="name">姓名</label>
                <input type="text" class="form-control" id="name" placeholder="请输入姓名">

            </div>
        </div>
        <div class="col-sm-12">
            <div class="form-group">
                <label for="name">电话</label>
                <input type="text" class="form-control" id="telephone" placeholder="请输入电话">
            </div>
        </div>
        <div class="col-sm-12">
            <div class="form-group">
                <label for="name">电话</label>
                <input type="text" class="form-control" id="address" placeholder="请输入地址">
            </div>
        </div>
        <div class="col-sm-12">
            <div class="form-group">
                <label for="name">图片上传</label>
                <button type="button" class="btn btn-default" onclick="chooseImage()">选择图片</button>
            </div>
        </div>
        <div class="col-sm-12">
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <did id="imgDiv"></did>
                    <button type="button" class="btn btn-default" onclick="add()">提交</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 通用js -->
<div th:include="admin/common/html/js :: onload_js">

</div>
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js" type="text/javascript"></script>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp"></script>
<!-- bootstarp 表格 -->
<script th:src="@{/static/admin/assets/js/bootstrap/js/bootstrap-table/bootstrap-table.min.js}" type="text/javascript"></script>
<script th:src="@{/static/admin/assets/js/bootstrap/js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}" type="text/javascript"></script>
<script th:src="@{/static/admin/assets/js/bootstrap/js/base_list.js}" type="text/javascript"></script>


<!-- 弹窗 -->
<script  th:src="@{/static/admin/assets/js/layer/layer.js}" type="text/javascript"></script>
<!-- 遮罩层 -->
<script  th:src="@{/static/admin/assets/js/blockUI/jquery.blockUI.js}" type="text/javascript"></script>
<!-- jqueryForm序列化 -->
<script  th:src="@{/static/js/jqueryFormSerializeJson.js}" type="text/javascript"></script>
<!--引入自定义的下拉选框-->
<script th:src="@{/static/js/self_select.js}" type="text/javascript"></script>
<script type="text/javascript">

    $(function(){



    });
    function chooseImage(){
        wx.chooseImage({
            count: 1, // 默认9
            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
            success: function (res) {
                var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                var html="";
                html+='<img src="'+localIds[0]+'" style="width:30px;height:30px;" /> ';
                wx.uploadImage({
                    localId: localIds[0], // 需要上传的图片的本地ID，由chooseImage接口获得
                    isShowProgressTips: 1, // 默认为1，显示进度提示
                    success: function (res) {
                        serverIds+= res.serverId+","; // 返回图片的服务器端ID
                        $.ajax({
                            cache : true,
                            type : "GET",
                            url : "/web/downloadWechatMedia?mediaId="+res.serverId,
                            data : {},
                            async : false,
                            error : function(request) {
                                $.modal.alertError("系统错误");
                            },
                            success : function(data) {
                                $.operate.saveSuccess(data);
                            }
                        });
                    }
                });
                $("#imgDiv").html(html);
            }
        });
    }
    wx.config({
        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: '[[${appId}]]', // 必填，公众号的唯一标识
        timestamp: '[[${timestamp}]]',
        nonceStr: '[[${noncestr}]]', // 必填，生成签名的随机串 可固定
        signature: '[[${signature}]]', // 必填，签名，可固定
        jsApiList: ['checkJsApi','chooseImage','previewImage','uploadImage','downloadImage','openLocation','getLocation']   // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
    });
    wx.ready(function(){
        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户操端的异步作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
        wx.getLocation({
            type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
            success: function (res) {
                var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
                var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
                var speed = res.speed; // 速度，以米/每秒计
                var accuracy = res.accuracy; // 位置精度
                var geocoder = new qq.maps.Geocoder({
                    complete : function(result){
                        //console.log(result.detail.address);
                        //alert(result.detail.address);
                        //$("#address").html(result.detail.address);
                        alert(result.detail.address);
                    }
                });
                var latLng = new qq.maps.LatLng(latitude,longitude);
                geocoder.getAddress(latLng);
            }
        });
    });
</script>


</body>


</html>
